

/**
 * 鼠标移入信息提示框
 */

import '../cssStyle/Tooltips.css'

export default class Tooltips {

  constructor(viewer){
    this._viewer = viewer
    this._wrapper = undefined
    this._enable = undefined
    this._template = undefined
    this.mounted()
  }

  /**
   * 
   */

  mounted(){
    this._wrapper = this.createDom()
  }

  /**
   * 创建dom元素
   * @returns dom元素
   */
  createDom(){
    let domElement = document.createElement('div')
    domElement.className = 'dk-tooltips'
    this._viewer.cesiumWidget.container.appendChild(domElement)
    return domElement
  }

  /**
   * 更新屏幕位置
   */
  updateWindowPosition(position){
    // div展示位置
    let x = position.x + 25
    let y = position.y - this._wrapper.clientHeight / 2
    this._wrapper.style.transform = 'translate('+ x +'px , '+ y +'px)'
  }

  /**
   * 展示信息
   * @param {*} position 
   * @param {*} message 
   */
  showAt(position , message){
    position && this.updateWindowPosition(position)
    this._template = message
    this._wrapper.innerHTML = this._template
  }

  /**
   * 设置css样式
   * @param {*} style 
   */

  setCssStyle(style){
    
  }

  /**
   * 设置html模板
   * @param {html} template 
   */
  setTemplate(template){  
    if(!template) return
    this._template = template
    this._wrapper.innerHTML = this._template
  }

  /**
   * 销毁对象
   */
  destroy(){
    this._wrapper.remove()
  }

  get enable(){
    return this._enable
  }
  
  set enable(val){
    this._enable = val
    let isShow = this._enable ? 'visible' : 'hidden'
    this._wrapper.style.visibility = isShow
    isShow = undefined
  }
}

